<template>
	<view class="containt">
		<view style="width: 750rpx;height: 754rpx;position: relative;">
			<swiper style="width: 100%; height: 100%;" :indicator-dots="false" :autoplay="false" class="swiper" :current="currentNum" ref="swiper" @change="(e)=>{handleImg(e.detail.current)}">
				<swiper-item style="width: 100%; height: 100%;" v-for="(item,index) in list1" :key="index">
					<image :src="`${baseimgURL}${item}`" style="width: 100%; height: 100%;" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view style="position: absolute;right: 22rpx; bottom: 22rpx; background: rgba(0,0,0,0.5);color: #FFFFFF;font-size: 24rpx;padding: 4rpx 10rpx;">
				{{currentNum+1}}/{{list1.length}}
			</view>
		</view>
		<view class="scrollbox">
			<scroll-view scroll-x="true" class="scroll">
				<image v-for="(item,index) in list1" :src="`${baseimgURL}${item}`" class="scrollimg" :class="currentNum === index?'sel':''" @click="handleImg(index)" mode="aspectFill" ></image>
			</scroll-view>
		</view>
		<view class="content">
			<view class="title">{{detail.brandIdName}}</view>
			<view class="fee">鉴定费:&nbsp;&nbsp; ￥{{detail.payAmount}}</view>
			<view class="fee" v-if="detail.applyRemark">备注: {{detail.applyRemark}}</view>
			<view class="result" v-if="detail.orderStatus !== 'payment'">鉴定结果: <text style="font-weight: 600;">{{ detail.appraiseResultName || '鉴定中' }}</text></view>
			<view v-if="detail.orderStatus !== 'payment'">
				<view class="bottcontent" v-if="detail.appraiseResult">
					<view class="botttitle">预估鉴定详情</view>
					<view class="tipsinfo">
						{{ detail.appraiseRemark }}
					</view>
				</view>
				<view class="bottcontent" v-else>
					<view class="botttitle">预估鉴定详情</view>
					<view class="tipsinfo">鉴定师正在为您鉴定中，请耐心等候</view>
				</view>
			</view>
		</view>
		<view class="bottomview flex">
			<button class="smallBtn" open-type="contact">
				<image src="@/static/img/custom.png" style="width:30rpx;height:30rpx;right: 6rpx;" align="center"></image>
				 <view class="btntext">联系客服</view>
			</button>
			<view v-if="detail.orderStatus === 'payment'" class="lastbtn" @click="handlePay">去支付</view>
			<view v-else class="lastbtn" @click="handleSell">我要出售</view>
		</view>
		<view class="float-layer" v-show="showDialog"></view>
		<view class="float-menu" v-show="showDialog">
			<view class="title">
				<text class="bold">我要出售</text>
				<text class="cancel" @tap="handleCancel">取消</text>
			</view>
			<view class="content">
				<view class="tip">选择出售方式</view>
				<view>
					<view class="menu-item" @tap="handleNavigateTo('yydd')">
						<view class="flex" style="align-items: center;">
							<image
								style="width: 47rpx;height: 47rpx;"
								src="@/static/img/yydd.png"
								mode="widthFix"
							/>
							<text class="menu-item-text">预约到店</text>
						</view>
						<view class="flex" style="align-items: center;">
							<text class="menu-item-desc">就近门店</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="menu-item" @tap="handleNavigateTo('yysm')">
						<view class="flex" style="align-items: center;">
							<image
								style="width: 47rpx;height: 47rpx;"
								src="@/static/img/yysm.png"
								mode="widthFix"
							/>
							<text class="menu-item-text">预约上门</text>
						</view>
						<view class="flex" style="align-items: center;">
							<text class="menu-item-desc">上门收货</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="menu-item" @tap="handleNavigateTo('sfyj')">
						<view class="flex" style="align-items: center;">
							<image
								style="width: 47rpx;height: 47rpx;"
								src="@/static/img/sfyj.png"
								mode="widthFix"
							/>
							<text class="menu-item-text">顺丰邮寄</text>
						</view>
						<view class="flex" style="align-items: center;">
							<text class="menu-item-desc">上门取件</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import { fetchDetail } from '@/api/jianding'
	import { baseimgURL } from '@/config'
	import payUtil from '@/utils/pay'

	let wxCode = ''
	const currentNum = ref(0)
	const detail = ref({})
	const list1 = ref([])
	let orderNo = ref('')
	const showDialog = ref(false)
	const handleImg = (index) => {
	  currentNum.value = index
	}

	const getDetail = async (orderNo) => {
		try {
			const { data } = await fetchDetail({orderNum: orderNo})
			detail.value = data
			list1.value = data.productPicture && data.productPicture.split(',')
		} catch(err) {
			console.error(err)
		}
	}

	const handleSell = () => {
		if (detail.value.orderStatus === 'complete') {
			if (detail.value.recycleOrderNum) {
				uni.showToast({
					title: '已生成相应订单，请前往订单列表查看',
					icon: 'none',
				})
			} else {
				showDialog.value = true		
			}
		} else {
			uni.showToast({
				title: '请等待鉴定完成',
				icon: 'none',
			})
		}
	}

	const handleCancel = () => {
		showDialog.value = false
	}

	const handleNavigateTo = (val) => {
		switch(val) {
			case 'yydd':
				uni.navigateTo({ url: '/pages/bar?index=2' })
				break;
			case 'yysm':
				uni.navigateTo({ url: '/pages/me/address?orderNo=' + orderNo })
				break;
			case 'sfyj':
				uni.navigateTo({ url: '/pages/me/address?orderNo=' + orderNo })
				break;
		}
	}

	const handlePay = () => {
		payUtil.getPrepayOrder(detail.value.orderNumber, wxCode)
	}

	onLoad(async options => {
		const res = await wx.login()
		wxCode = res.code
		if (options.orderNo) {
			orderNo = options.orderNo
			getDetail(options.orderNo)
		}
	})
</script>

<style lang="scss" scoped>
	.containt {
		background-color: #ffffff;
		padding-bottom: 100rpx;
	}
	/* 轮播指示器 */
	.indicator-num {
		padding: 4rpx 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 4rpx;
		width: 49rpx;
		@include flex;
		justify-content: center;

		&__text {
		color: #ffffff;
		font-size: 22rpx;
		}
	}
	.scrollbox{
		padding: 30rpx 22rpx;
	}
	.scroll{
		white-space: nowrap;
	}
	.scrollimg{
		width: 94rpx;
		height: 94rpx;
		border-radius: 7rpx;
		margin-right: 14rpx;
		border: 2rpx solid transparent;
	}
	.sel{
			border: 2rpx solid #953B82;
	}
	.title{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #060C3C;
		margin-bottom: 22rpx;
	}
	.fee {
		font-size: 22rpx;
		color: #060C3C;
		margin-bottom: 10rpx;
	}
	.result {
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		color: #060C3C;
		padding-bottom: 22rpx;
		border-bottom: 1px solid #eeeeee;
	}
	.content{
		padding: 0 22rpx;
	}
	.price{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
		margin-bottom: 16rpx;
		:nth-child(2){
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FE395E;
			line-height: 36rpx;
			margin-left: 8rpx;
		}
		.span{
			font-size: 25rpx;
		}
	}
	.bottcontent{
		.botttitle{
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
			margin-bottom: 14rpx;
			margin-top: 22rpx;
		}
	}
	.tipsinfo{
		background: #F9F9F9;
		padding: 20rpx 36rpx;
		background: #F9F9F9;
		font-size: 24rpx;
		color: #666666;
		border-radius: 7rpx;
	}
	.bottomview{
		position: fixed;
		left: 0;
		bottom: 0rpx;
		width: 100%;
		background: #fff;
		padding: 10rpx 22rpx 16rpx;
		box-sizing: border-box;
		.lastbtn{
			width: 547rpx;
			height: 91rpx;
			background: #953B82;
			border-radius: 7rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 27rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.smallBtn{
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333854;
		line-height: 33rpx;
		padding: 0;
		background: #fff;
		.btntext{
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333854;
			margin-top: 8rpx;
		}
	}
	.smallBtn::after{ border: none;}
	.float-layer {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	.float-menu {
		width: 100%;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		height: 545rpx;
		background-color: #ffffff;
		border-radius: 14rpx 14rpx 0 0;
	}
	.float-menu .title {
		position: relative;
		text-align: center;
		margin-top: 40rpx;
	}
	.float-menu .title .cancel {
		position: absolute;
		top: 10rpx;
		right: 40rpx;
		font-size: 27rpx;
		font-weight: 400;
		color: #333333;
	}
	.float-menu .title .bold {
		font-size: 33rpx;
		font-weight: 500;
		color: #060C3C;
	}
	.float-menu .content {
		margin: 0 45rpx;
	}
	.float-menu .content .tip {
		font-size: 27rpx;
		font-weight: 500;
		height: 38rpx;
		line-height: 38rpx;
		color: #333333;
		margin-bottom: 30rpx;
	}
	.content .menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #F9F9F9;
	}
	.content .menu-item .menu-item-text {
		font-size: 27rpx;
		color: #333333;
		font-weight: 400;
		margin-left: 14rpx;
	}
	.content .menu-item .menu-item-desc {
		font-size: 24rpx;
		color: #999999;
		font-weight: bold;
		margin-right: 10rpx;
	}
</style>
